<style type="text/css">
	#Con{
		background-color:#FFF;
	}
	#Content{
		border:0px solid #DDD;
	}
	div.pic-left{
		position:fixed;
		top:0;
		left:24px;
		width:311px;
		height:208px;
		background: url(/luci-static/images/pic_left.png?_=20170809165512) no-repeat;
	}
	div.app-list{
		position:relative;
		z-index:100;
		font-size:0;
		width:100%;
	}
	ul.app-list{
		font-size:0;
		width:100%;
		margin:95px auto;
		text-align:left;
	}
	li.app-item{
		color:#AACC00;
		width:25%;
		margin:auto;
		display:inline-block;
		vertical-align:middle;
	}
	li.app-item .app-icon{
		display:inline-block;
		width:80px;
		height:80px;
		text-align:center;
		border-radius:12px;
	}
	li.app-item div.app-desc{
		display:inline-block;
		vertical-align:top;
		height:80px;
		margin-left:10px;
		margin-right:8px;
	}
	li.app-item p.app-name{
		color:#4F5356;
		font-size:18px;
		margin:2px auto 4px;
	}
	li.app-item p.app-desc{
		color:#909396;
		font-size:14px;
		width:9em;
	}
</style>
<script type="text/javascript">
(function(){
	var appList = [{href:"#/pc/routerInfoApp", icon:"router_status", name:label.routerInfo, desc:label.routerInfoTip},
				   {href:"#/pc/networksetApp", icon:"internet", name:label.networkset, desc:label.networksetTip},
				   {href:"#/pc/guestApp", icon:"guest", name:label.guestNet, desc:label.guestNetTip},
				   {href:"#/pc/parentCtrlApp", icon:"parent_ctrl", name:label.parentCtrl, desc:label.parentCtrlTip},
				   {href:"#/pc/backupResetApp", icon:"restore", name:label.backupReset, desc:label.backupResetTip},
				   {href:"#/pc/signalSetApp", icon:"signal", name:label.signalSet, desc:label.signalSetTip},
				   {href:"#/pc/wispApp", icon:"wisp", name:label.wisp, desc:label.wispTip},
				   //{href:"#/pc/wdsApp", icon:"wds", name:label.wds, desc:label.wdsTip},
				   //{href:"#/pc/screenSetApp", icon:"screen", name:label.screenSet, desc:label.screenSetTip},
				   //{href:"#/pc/usbStorageApp", icon:"usb", name:label.usbStorage, desc:label.usbStorageTip},
				   //{href:"#/pc/QoSApp", icon:"qos", name:label.QoS, desc:label.QoSTip},
				   //{href:"#/pc/autoUpgradeApp", icon:"upgrade", name:label.autoUpgrade, desc:label.autoUpgradeTip},
				   {href:"#/pc/adbApp", icon:"adb", name:"广告屏蔽", desc:"过滤网页和视频广告"},
				   {href:"#/pc/toolsApp", icon:"tools",  name:"高级设置", desc:"设置启动任务、定时任务等"},
				   {href:"#/pc/diagnoseApp", icon:"diagnose", name:label.diagnose, desc:label.diagnoseTip},
				   {href:"#/pc/safeMngApp", icon:"security", name:label.safeMng, desc:label.safeMngTip},
				   {href:"#/pc/manualUpgradeApp", icon:"upload", name:label.manualUpgrade, desc:label.manualUpgradeTip},
				   {href:"#/pc/remoteMngApp", icon:"remote", name:label.remoteMng, desc:label.remoteMngTip},
				   {href:"#/pc/lanSetApp", icon:"lan", name:label.lanSet, desc:label.lanSetDesc},
				   {href:"#/pc/dhcpServerApp", icon:"dhcp", name:label.dhcpServer, desc:label.dhcpServerTip},
				   {href:"#/pc/ddnsApp", icon:"ddns", name:label.ddns, desc:label.ddnsTip},
				   {href:"#/pc/portForwadApp", icon:"port_forward", name:label.portForwad, desc:label.portForwadTip},
				   {href:"#/pc/dmzApp", icon:"dmz", name:label.dmz, desc:label.dmzTip},
				   {href:"#/pc/UPnPApp", icon:"upnp", name:label.UPnP, desc:label.UPnPTip},
				   {href:"#/pc/lightApp", icon:"led", name:label.ledSet, desc:label.ledTip}/*,
				   {href:"#/pc/elinkApp", icon:"elink", name:label.elinkSet, desc:label.elinkSetTip},
				   {href:"#/pc/timeZoneApp", icon:"timezone", name:label.regionTimeZone, desc:label.regionTimeZoneTip},
				   {href:"#/pc/VPNServerApp", icon:"vpn_server", name:label.VPNServer, desc:label.VPNServerTip},
				   {href:"#/pc/VPNClientApp", icon:"vpn_cilent", name:label.VPNClient, desc:label.VPNClientTip},
				   {href:"#/pc/PhiCloudApp", icon:"cloud", name:label.PhiCloud, desc:label.PhiCloudTip},
				   {href:"#/pc/PhiCDNApp", icon:"cdn", name:label.PhiCDN, desc:label.PhiCDNTip}*/];

	function initAppList(appList){
		function initApp(app){
			var icon = "/luci-static/images/app-icon/" + app.icon + ".png?_=20170809165512";
			var appHtml = '<a href="' + app.href + '"><li class="app-item">' +
							'<img class="app-icon" src="' + icon + '" />' +
							'<div class="app-desc">' +
								'<p class="app-name">' + app.name + '</p>' +
								'<p class="app-desc">' + app.desc + '</p>' +
							'</div></li></a>';
			return $(appHtml);
		}

		var colNum = 4;
		var len = appList.length;
		var rowNum = Math.ceil(len / colNum);
		var idx = 0;
		var appCon = $("#AppList");

		for (var i = 0, idx = 0; i < rowNum; i++){
			var ul = $('<ul class="app-list"></ul>').appendTo(appCon);
			for (var j = 0; j < colNum && idx < len; j++, idx++){
				initApp(appList[idx]).appendTo(ul);
			}
		}
	}

	initAppList(appList);
})();
</script>
<div class="pic-left"></div>
<div class="app-list" id="AppList"></div>
